

 <html>
 	<head>
 		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="../../js/vue-lazyload.js"></script>
		<script src="html5plus://ready"></script>
		<script src="../../js/ajax.js"></script>
		<script type="text/javascript">
			document.addEventListener('plusready', function(){
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
			});
		</script>
 	</head>
 	<body>
		<div id="app">
			<!-- 头部搜索框 -->
			<div class="Head" style="background: red;">
				<van-search  v-model="value"  @search="onSearch" placeholder="搜索商品名称" background="red"  />
			</div>
			<div>
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
				<van-row>
				  <van-col span="6">
					  <van-badge-group :active-key="activeKey" @change="onChange" >
					    <van-badge :title="item.Name" class="qwe" @click="change(item)" v-for="item in Categories">
					    </van-badge>
					  </van-badge-group>
				  </van-col>
				  <van-col span="18">
					  <van-row>
						  <van-col span="12"  v-for="item in Products" >
							<div>
								 <div style="width: 100%;">
								    <img style="width: 100px;height: 100px;" v-lazy="item.GoodsImageUrl" style="width: 100%;" alt="">
								</div>
								<div style="font-size: 12px;" @click="onclick(item.Id)">
									{{item.Name}}
								</div> 
								<div style="color: red;">
									￥{{item.MarketPrice}}
								</div>
								<div style="color: #969799; font-size: 12px;">
									阅读量:{{item.BrowseCount}}
								</div>
								<div style="color: #969799; font-size: 12px;">
									销量:{{item.VirtualSaleCount}}
								</div>
							</div>
						</van-col>
					</van-row>
				  </van-col>
				</van-row>
				</van-pull-refresh>	
			</div>
		</div>
		<script type="text/javascript">
			 Vue.use(VueLazyload, {
			    error:"../../img/520.jpg",//图片异常时
				loading:"../../img/self/timg.gif"
			});
			var vm=new Vue({
				el:'#app',
				data:{
					activeKey:1,
					value: "",
					Categories:[],
					Products:[],
					finished: false,//刷新
					isLoading: false
					
				},
				methods:{
					onRefresh: function() {						
						setTimeout(() => {
							this.$toast('刷新成功');
							this.isLoading = false;
						}, 500);
					},
					onSearch: function() {		
						var w = plus.webview.create("../home/sousuo.html", "sousuo", {}, {
							name:this.value
						}); 
						w.show();
						console.log(w.name);
					},
					onclick:function(id){//商品详情
						var del=plus.webview.create("../details.html","id",{},{shopId:id});
						plus.webview.show(del);
					},
					onChange:function(key){
						this.activeKey=key;
					},
					change:function(item){
						this.getProduct(item.Id)
					},
					getCategories:function(){//商品分类
						var _this = this;
						ajax({
						    url:"http://dsapi.ysd3g.com/api/Categories",
						    dataType:"jsonp",
						    success:function(res){
								console.log(res);
						       _this.Categories=res.Categories;
							   _this.getProduct(_this.Categories[_this.activeKey].Id)
						    }
						})
					},
					getProduct:function(id){//商品数据信息
						var _this = this;
						ajax({
						    url:"http://dsapi.ysd3g.com/api/GoodsByCategoryId",
						    dataType:"jsonp",
							data:{
								typeId:id,
								p:1
							},
						    success:function(res){
								 _this.Products = res.Data;
								console.log(res);
						      
						    }
						})
					}
				},
				created() {
					this.getCategories();
				}
			});
		</script>
		
 	</body>
 </html>